import DocCardBox from "@/components/doc-card"
import React from "react"
import { DemoL1, demoL1Json } from "./demo/DemoL1"
import { DemoL2, demoL2Json } from "./demo/DemoL2"
import { DemoR1, demoR1Json } from "./demo/DemoR1"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"

const leftList = [
    {
        titleKey: "btn_title_1",
        hash: "btn-l-demo1",
        coms: [<DemoL1 key={0} />],
        comsJson: [demoL1Json()],
        desc: [
            {
                textType: "texts",
                texts: [{ text: "btn_1_1_1" }, { text: "type", textType: "tag" }, { text: "btn_1_1_3" }]
            }
        ]
    },
    {
        titleKey: "btn_title_3",
        hash: "btn-l-demo2",
        coms: [<DemoL2 key={0} />],
        comsJson: [demoL2Json()],
        desc: [
            {
                textType: "texts",
                texts: [{ text: "btn_2_1_1" }]
            }
        ]
    }
]

const rightList = [
    {
        titleKey: "btn_title_2",
        hash: "btn-r-demo1",
        coms: [<DemoR1 key={0} />],
        comsJson: [demoR1Json()],
        desc: [
            {
                textType: "texts",
                texts: [{ text: "btn_1_1_1" }, { text: "size", textType: "tag" }, { text: "btn_3_1_1" }]
            }
        ]
    }
]

function Button() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "ButtonProps",
            data: [
                {
                    schema: "size",
                    type: "ComponentSize",
                    defaultValue: "normal",
                    isRequire: t("no"),
                    desc: t("desc_btn_1")
                },
                {
                    schema: "type",
                    type: "ButtonType",
                    defaultValue: "default",
                    isRequire: t("no"),
                    desc: t("desc_btn_2")
                },
                {
                    schema: "htmltype",
                    type: "string",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_btn_3")
                },
                {
                    schema: "text",
                    type: "string",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_btn_4")
                },
                {
                    schema: "loading",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_btn_5")
                },
                {
                    schema: "changeLoading",
                    type: " React.Dispatch<React.SetStateAction<boolean>>",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_btn_6")
                },
                {
                    schema: "onClick",
                    type: "ButtonMouseType",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_btn_7")
                },
                {
                    schema: "onTouchStart",
                    type: "ButtonTouchType",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_btn_8")
                },
                {
                    schema: "classNames",
                    type: "ButtonClassNames",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_btn_7")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="Button" desc="buttonDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default Button
